<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3Alegacy%3A30-documentation%3A30-component_reference%3AMetaLayerSamples.js"></script>

<div class="shadow">

  <div class="contents">

    <h2>TextAreaInputComponent</h2>

    <h3>Description</h3>
    <p>
    Renders a multi-line text input box to collect user input. Change event is fired after user edits the content and removes the focus from the box.
    Pre/postChange functions can be used to make data validation.
    </p>

    <h3>Options</h3>

    <dl class="documentation">
      <dt>name</dt>
      <dd>The name of the component</dd>

      <dt>type</dt>
      <dd><code>textareaInputComponent</code></dd>

      <dt>listeners</dt>
      <dd><i>Array - </i> Parameters who this component will react to</dd>

      <dt>parameter</dt>
      <dd>Variable where the input is stored</dd>

      <dt>htmlObject</dt>
      <dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

      <dt>refreshPeriod</dt>
      <dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

      <dt>charWidth</dt>
      <dd>Width of this component (in number of characters). </dd>

      <dt>maxChars</dt>
      <dd>Maximum number of characters allowed. By default this is not set (no restriction)</dd>

      <dt>executeAtStart</dt>
      <dd>True to execute the component at start, false otherwise</dd>

      <dt>tooltip</dt>
      <dd>Tooltip to be displayed when mouse hovers</dd>

      <dt>preExecution</dt>
      <dd><i>Function - </i> Function to be called before the component is executed</dd>

      <dt>postExecution</dt>
      <dd><i>Function - </i> Function to be called after the component is executed</dd>

      <dt>preChange</dt>
      <dd><i>Function - </i> Function to be called before the component is changed</dd>

      <dt>postChange</dt>
      <dd><i>Function - </i> Function to be called after the component is changed</dd>

    </dl>

    <h3>Sample</h3>

    <div id="example" class="flora">
      <ul>
        <li><a href="#sample"><span>Sample</span></a></li>
        <li><a href="#code"><span>Code</span></a></li>
      </ul>
      <div id="sample">

        <div id="sampleObject"></div>

      </div>


        <div id="code">
          <textarea cols="80" rows="20" id="samplecode">
myInput = 
{
  name: "myInput",
  type: "textareaInputComponent",
  parameters:[],
  parameter: "input",
  htmlObject: "sampleObject",
  executeAtStart: true,
  postChange: function(){alert("you typed: " + input);}
};

Dashboards.init([myInput]);
Dashboards.finishedInit = false;

          </textarea>
          <br />
          <button onclick="evaluateCode(true)">Try me</button>
        </div>
      </div>

    </div>
  </div>

  <script language="javascript" type="text/javascript">
    var input = "";
    var myInput;
    var tabs = $("#example").tabs();
    evaluateCode(false);
  </script>
